<template>
  <view class="home-navbar">
    <view class="navbar">
      <view class="left">
        <t-button
          @click="openDrawer"
          size="large"
          variant="text"
          shape="square"
        >
          <t-icon
            name="view-list"
            style="font-size: 48rpx;"
          />
        </t-button>
        <t-search
          shape="round"
          placeholder="请搜索你想要的内容"
          @tap.native="searchTurn"
          v-if="navType === 'search'"
        />
      </view>

      <view class="title">{{ titleText }}</view>
      <view class="right"></view>
    </view>
    <t-popup v-model="visible" placement="left" style="width: 60vw">
      <t-cell-group title="导航">
        <t-cell
          v-for="(item, index) in sidebar"
          :key="index"
          :title="item.title"
          hover
          arrow
          :data-item="item"
          @click="itemClick(item)"
        ></t-cell>
      </t-cell-group>
    </t-popup>
    <!-- <t-drawer :visible="visible" :items="sidebar" placement="left" title="页面目录" @item-click="itemClick" /> -->
  </view>
</template>

<script>
import { defineComponent, h } from "vue";

// import { ViewList } from "tdesign-icons-vue-next";

const app = getApp();
const { navList } = app.globalData;
const sidebarData = navList.map((item) => ({
  title: item.title,
  // 去掉开头的斜杠
  url: item.url[0] === "/" ? item.url.slice(1) : item.url,
  isSidebar: false,
}));

export default defineComponent({
  name: "Nav",
  components: {},
  data() {
    return {
      visible: false,
      sidebar: [
        {
          title: "首页",
          url: "pages/home/index",
          isSidebar: true,
        },
        ...sidebarData,
      ],
    //   viewList: () => h(ViewList, { size: "24px" }),
    };
  },
  options: {
    styleIsolation: "shared",
  },
  props: {
    navType: {
      type: String,
      default: "",
    },
    titleText: {
      type: String,
      default: "",
    },
  },
  methods: {
    openDrawer() {
      this.setData({
        visible: true,
      });
    },

    itemClick(item) {
      const that = this;
      // console.log(item);
      const { isSidebar, url } = item;
      if (!url) {
        uni.showToast({
          title: "敬请期待",
          icon: "none",
        });
        return;
      }
      if (isSidebar) {
        uni
          .switchTab({
            url: `/${url}`,
          })
          .then(() => {
            // 防止点回tab时，sidebar依旧是展开模式
            that.setData({
              visible: false,
            });
          });
      } else {
        uni
          .redirectTo({
            url: `/${url}`,
          })
          .then(() => {
            that.setData({
              visible: false,
            });
          });
      }
    },

    searchTurn() {
      console.log("占位：函数 searchTurn 未声明");
    },
  },
  created: function () {},
});
</script>
<style lang="less" scoped>
@import "/variable.less";

.navbar {
  height: @nav-bar-height;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;

  .title {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    font-weight: bold;
    pointer-events: none;
  }
}

.home-navbar {
  height: @nav-bar-height;

  .navbar {
    .left {
      display: flex;
      align-items: center;
      padding: 0 16rpx;

      .t-search {
        --td-search-height: 64rpx;
        --td-search-font-size: @font-size-mini;
        width: 375rpx;

        .t-icon {
          font-size: @font-size-default !important;
        }
      }
    }
  }
}
</style>
